<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{/public :: #public_head}"></head>
<body>
<div class="container">
    <div th:replace="~{/public :: #public_header}"></div>
    <div th:replace="~{/public :: #public_time}"></div>
    <div class="main">
        <div th:replace="~{/public :: #public_left(activeUri='home')}"></div>
        <div class="right">
            <canvas id="myChart1" style="width: 100%;height: 100%"></canvas>
        </div>
    </div>
    <div th:replace="~{/public :: #public_footer}"></div>
</div>
<script>
    $(function () {
        var thisWeek = getDatesOfThisWeek()
        var newVar = [[${dayInfo}]]
        let ctx = document.getElementById('myChart1');
        const labels = ['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月份'];  // 设置 X 轴上对应的标签
        const data = {
            labels: thisWeek,
            datasets: [{
                label: '文章发表量折线图',
                data: newVar,
                fill: false,
                borderColor: 'rgb(75, 192, 192)', // 设置线的颜色
                tension: 0.1
            }]
        };
        const config = {
            type: 'line', // 设置图表类型
            data: data,
            options: {
                responsive: true,  // 设置图表为响应式

                interaction: {  // 设置每个点的交互
                    intersect: false,
                },
                scales: {
                    x: {
                        display: true,
                        title: {
                            display: true,
                            text: '日期'
                        }
                    },
                    y: {
                        display: true,
                        title: {
                            display: true,
                            text: '数量'
                        }
                    }
                }
            }
        };
        let myChart = new Chart(ctx, config);

    })
    function getDatesOfThisWeek() {
        const today = new Date()
        // 确定今天是一周中的哪一天，0代表周日，1代表周一，以此类推
        const dayOfWeek = today.getDay()
        // 如果今天是周日，那么周一应该是昨天，否则周一就是今天减去今天是一周中的第几天
        const firstDayOffset = dayOfWeek === 0 ? 6 : 1 - dayOfWeek
        let firstDay
        // 创建本周第一天的日期对象
        if (firstDayOffset >= 0) {
            firstDay = new Date(today.setDate(today.getDate() - firstDayOffset))
        } else {
            firstDay = new Date(today.setDate(today.getDate() + firstDayOffset))
        }
        // 创建一个数组来保存本周的日期
        const datesOfThisWeek = []
        // 遍历每一天并添加到数组中
        for (let i = 0; i < 7; i++) {
            const date = new Date(firstDay.getTime() + i * 24 * 60 * 60 * 1000)
            datesOfThisWeek.push(date.toISOString().substring(0, 10)) // YYYY-MM-DD 格式
        }
        return datesOfThisWeek
    }

</script>
</body>
</html>